<template>
  <div class="image-widget" :style="imageStyle">
    <img 
      :src="src" 
      :alt="alt"
      :style="imgStyle"
      @error="handleImageError"
      @load="handleImageLoad"
    />
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'

const props = defineProps({
  src: {
    type: String,
    default: 'https://via.placeholder.com/300x200'
  },
  alt: {
    type: String,
    default: '图片描述'
  },
  fit: {
    type: String,
    default: 'cover'
  }
})

const emit = defineEmits(['error', 'load'])

const imageLoaded = ref(false)
const imageError = ref(false)

const imageStyle = computed(() => ({
  width: '100%',
  height: '100%',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  backgroundColor: '#f5f5f5'
}))

const imgStyle = computed(() => ({
  maxWidth: '100%',
  maxHeight: '100%',
  objectFit: props.fit
}))

const handleImageError = (event) => {
  imageError.value = true
  emit('error', event)
}

const handleImageLoad = (event) => {
  imageLoaded.value = true
  emit('load', event)
}
</script>

<style scoped>
.image-widget {
  position: relative;
  overflow: hidden;
}

.image-widget img {
  transition: all 0.3s ease;
}

.image-widget:hover img {
  transform: scale(1.05);
}
</style> 